An Interactive Visualisation of Football Tracking Data
How to create truly interactive visualisations of football tracking data. Sample data from Metrica Sports is used to present three use-cases. How to be able to drag players on the football pitch. How to animate the tracking data. And how to use event and tracking data together to filter for interesting actions.
Unfortunately, I missed the last episode How Tracking Data is Used in Football and What are the Future Challenges of Friends of Tracking Data hosted by David Sumptor (@Soccermatics) with @JaviOnData, @the_spearman, Suds Gopaladesikan and @EightyFivePoint. It felt a bit like missing a great panel at a conference due to overlap in schedules. Luckily for me, and all others, everything is recorded on Youtube and available here. This is what David had to say about the episode.
For me personally, Thursday's live #FoT was one of the best discussions I have ever had about the science behind football analytics. So in depth with @JaviOnData, @the_spearman, @suds_g and @EightyFivePoint. Here @sk3tchYourLife really picks out the key points of the discussion. pic.twitter.com/feQ0e5y6m7
— David Sumpter (@Soccermatics) April 10, 2020
I agree one hundred percent that it was a really in-dept discussion of current issues. They also managed to get sample tracking data of two matches from Metrica Sports. Given the quality of the talk they had, I thought I will have to up the ante on my side. I thought about what I would have been very happy to know a year ago and therefore I created a notebook where I use Jupyter widgets to create interactive components which you can use to investigate the Metrica Sports data. You can get all the code on Github, https://github.com/seidlr/fotd-interactive-football-pitch, and simply follow the installation instructions in the Readme.
Or, and this is what I really like about Jupyter widgets, you can just use Binder to test everything online without installation.
Just click on this image
and give Docker some time to build the image, and run all code of the repository online.
I decided to work on three small showcases such that you get an idea how you can use the tools.
- Use-case 1: Moving Players on a Football Pitch
- Use-case 2: Animate Tracking Data
- Use-case 3: Replay Events with Tracking Data
Here are some videos of the three use-cases I picked as showcases:
Use-case 1: Moving Players on a Football Pitch
I think everyone will share kind of the same story of how his or her visualisation of football pitches changed or improved over time. For me it was starting with Matplotlib and switching to Plotly because you actually don’t want to spent a ton of time to get some simple hover effects etc. But at some point you recognize that in the end you want to be able to actually move players or the ball around on the pitch and possibly rerun your pitch control or expected-goals model and answer some What-If questions. If you reached this point, you will be pleased to see that this is actually possible using bqplot
, a Python wrapper around D3.js, in a jupyter notebook. If you launch the notebook on Binder, you can drag and drop each player and the ball on the pitch.
Use-case 2: Animate Tracking Data
The cool thing is that you can build other widgets on top of this in a simple way. As example, I’ve attached a Play
and Slider
widget. Now you can easily replay the match using tracking data.
Use-case 3: Replay Events with Tracking Data
The Metrica data also gives you access to all the events that happened in the match. Would be cool to be able to filter events and jump to the position in the replay where they happened? We can use a qgrid
widget to do this! Here is the result.
What to do from here?
Getting all the widgets into a state to run smoothly is always a bit challenging, especially because they tend to fail silently, meaning that there might be no error in the notebook but the widget is not doing what you want it to do due to a coding error. The only way to learn how to use them is actually to invest time. The best way is to build on a widget and try to add new functionality.
Here are some ideas:
- Add the current game time to the pitch plot (and update it when playing).
- Add some functionality like voronoi cells or convex hulls of teams as implemented here.
- Add an auto-replay option: When selecting an event, the animation starts at the start time of the event and stops it reached the end time.
- Create an overlay/tooltip for player information using
bqplot.tooltip
. - Calculate the distance covered for each player and the ball in the match.